<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>milkbox奶盒空间</title>

    <!--本地版-->
    <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
    <script src="plugins/vue_2.6.14/vue.js"></script>
    <script src="plugins/elementUI_2.15.7/index.js"></script>
    <script src="plugins/axios/axios_0_27_2.min.js"></script>
    <script src="plugins/jquery/jquery-3.3.1.min.js"></script>
    <!-- 动画框架 -->
    <link rel="stylesheet" href="plugins/animate_4.1.1/animate.min.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/common/common.css">

    <!-- 引入头部 -->
    <script src="js/common/header.js"></script>
    <link rel="stylesheet" href="css/common/header.css">

    <!-- 接口地址全局变量 -->
    <script src="/js/common/jieKouAddress.js"></script>
    <!-- 全局函数 -->
    <script src="/js/common/commonMethod.js"></script>

    <!-- 当前页主样式 -->
    <link rel="stylesheet" href="css/postDetail.css" />

</head>

<body>

    <div id="app">
        <!-- 公共头部 -->
        <header id="headerContent"></header>

        <div class="milkbox-container-center">
            <!-- 帖子内容 -->
            <div class="milkbox-shadow-button-right post-content-outside">
                <!-- 头部的用户头像和用户昵称部分 -->
                <div class="post-title x-box">
                    <img class="post-user-avatar" :src="post.user.userAvatarURL" />
                    <div class="post-title-left y-box">
                        <div class="post-user-nickname">{{post.user.userNickname}}</div>
                        <div class="post-time">{{post.time}}</div>
                    </div>
                </div>
                <!-- 帖子内容 -->
                <div class="post-content">{{post.content}}</div>
                <!-- 帖子图片 -->
                <div class="post-iamge-list x-box">
                    <img :src="image" :style="{height: postImageSize, width: postImageSize}"
                        v-for="(image, index) in post.imageList" :key="index">
                </div>
                <!-- 点赞收藏等工具部分 -->
                <div class="post-tools x-box">
                    <div class="post-view y-box">浏览{{post.view}}次</div>
                    <div class="post-tools-image x-box">
<!--                        <img class="milkbox-shadow-button-right" src="img/未点赞.png">-->
<!--                        <img class="milkbox-shadow-button-right" src="img/未收藏.png">-->
<!--                        <img class="milkbox-shadow-button-right" src="img/评论.png">-->
                        <div class="milkbox-shadow-bottom-right center-all y-box pointer" @click.stop="praise(post)">
                            <img :src="post.isLike ? 'img/已点赞.png' : 'img/未点赞.png'">
                            {{post.likeCount}}
                        </div>
                        <div class="milkbox-shadow-bottom-right center-all y-box pointer" @click.stop="collect(post)">
                            <img :src="post.isCollection ? 'img/已收藏.png' : 'img/未收藏.png'">
                            {{post.collectionCount}}
                        </div>
                        <div class="milkbox-shadow-bottom-right center-all y-box pointer">
                            <img src="img/评论.png">
                            {{post.commentCount}}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发表评论 -->
            <div class="milkbox-shadow-button-right textarea-box-outside">
                <div :class="{'milkbox-disabled': isPostCommentChanging}">
                    <!-- 表单部分 -->
                    <el-form :model="postCommentFormData" :rules="postCommentFormRules" ref="postCommentForm">
                        <div class="textarea-box">
                            <el-form-item label="" prop="content">
                                <el-input type="textarea" placeholder="发个友善的评论吧~~~"
                                    v-model="postCommentFormData.content" maxlength="512" show-word-limit
                                    :autosize="{ minRows: 3, maxRows: 8}">
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <!-- 按钮部分 -->
                    <div slot="footer" class="dialog-footer x-box">
                        <div class="milkbox-button" @click="sendPostComment('postCommentForm')">
                            发布</div>
                        <div class="milkbox-button milkbox-button-danger" @click="resetForm('postCommentForm')">
                            取消</div>
                    </div>
                </div>
            </div>

            <!-- 评论列表 -->
            <div class="milkbox-shadow-button-right post-content-outside"
                v-for="(postComment, index) in post.postCommentList" :key="postComment.id">
                <!-- 头部的用户头像和用户昵称部分 -->
                <div class="post-title x-box">
                    <img class="post-user-avatar" :src="postComment.user.userAvatarURL" />
                    <div class="post-title-left y-box">
                        <div class="post-user-nickname">{{postComment.user.userNickname}}</div>
                        <div class="post-time">{{postComment.time}}</div>
                    </div>
                </div>
                <!-- 帖子内容 -->
                <div class="post-content">{{postComment.content}}</div>
            </div>
        </div>
    </div>

    <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
    <script src="js/postDetail.js"></script>
    <!-- 自己对动画框架的封装 -->
    <script src="js/common/commonAnimation.js"></script>
</body>